"use strict";

// let data = [{
//         name: "zwz",
//         age: 17
//     },
//     {
//         name: "zcm",
//         age: 18
//     },
//     {
//         name: "yjw",
//         age: 19
//     }
// ];

// /**
//  * 使用class来操作数组，具体是使用map方法创建一个全是实例对象的新数组然后进行操作
//  */
// class User {
//     // 实例对象可以使用里面创建的所以属性以及方法
//     constructor(data) {
//         this.model = data;
//     }

//     // 不使用static的方法只能实例对象使用
//     get age() {
//         return this.model.age;
//     }

//     // 使用map方法，创建一个全是实例对象的新数组
//     static createData(data) {
//         return data.map(item => new User(item));
//     }

//     // 把createData创建的新数组当作参数传入，利用数组自带方法操作
//     static printName(data) {
//         return data.reduce((t, c) => {
//             return t + c.age;
//         }, 0);
//     }

// }
// let user = User.createData(data);
// console.log(user);
// console.log(User.printName(user));





/**
 * 可以使用super调用父类的方法，使用super会改变当前父类的this指针，指针指向调用super的对象
 */
// class Parent {
//     constructor(name, age) {
//         console.log("子类调用super也会调用父类的构造函数");
//         this.name = name;
//         this.age = age;
//     }
//     getName() {
//         console.log("object");
//     }
// }
// class User extends Parent {
//     constructor(name, age) {
//         // 使用super就相当于Parent.call(name,age),就是把父类的this指针改变
//         super(name, age);
//     }
//     test() {
//         super.getName();
//     }
// }
// let user = new User("zwz", 17);
// user.test();


/**
 * 利用弹性盒模型的特性，整个面版不需要特地设置高度，直接用下级标签撑高面板，
 * 所以有了上方高度减少，下方补上的动画效果，并且剩下的标题标签使用line-height，
 * 所以没有被缩小
 */
class Animation {
    constructor(el) {
        this.el = el;
        this.dafaultHeight = this.height;
        this.isShow = true;
    }

    get height() {
        return window.getComputedStyle(this.el).height.slice(0, -2) * 1;
    }
    set height(height) {
        this.el.style.height = height + "px";
    }

    // callback：回调函数，动画结束后执行
    hide(callback) {
        this.isShow = false;
        let timer = setInterval(() => {
            if (this.height <= 0) {
                clearInterval(timer);
                callback && callback();
                return;
            }
            this.height = this.height - 1;
        }, 10);
    }

    // callback：回调函数，动画结束后执行
    show(callback) {
        this.isShow = false;
        let timer = setInterval(() => {
            if (this.height >= this.dafaultHeight) {
                clearInterval(timer);
                callback && callback();
                return;
            }
            this.height = this.height + 1;
        }, 10);
    }




}



class Slide {
    constructor(el) {
        this.el = document.querySelector(el);
        this.links = this.el.querySelectorAll("dt");
        this.panels = [...this.el.querySelectorAll("dd")].map(item =>
            // Panels继承Animation，获取Panels实例对象调用Animation类的方法
            new Panels(item)
        );
        this.bind();
    }

    // 为dt添加单击事件
    bind() {
        this.links.forEach((item, i) => {
            item.addEventListener("click", () => {
                this.action(i);
            });
        });
    }
    // 事件处理方法
    action(i) {
        Panels.hideAll(Panels.filter(this.panels, i), () => {
            this.panels[i].show()
        });

    }
}


class Panels extends Animation {
    // 计数器，当hide()执行完之后才能再次调用hideAll()
    static num = 0;
    static hideAll(items, callback) {
        if (Panels.num > 0) return;

        items.forEach(item => {
            Panels.num++;
            item.hide(() => {
                Panels.num--
            });
        });

        callback && callback();
    }
    static filter(items, i) {
        return items.filter((item, index) => index != i);
    }
}
let slide = new Slide(".slide");